<template>
  <div v-loading='listLoading'>
    <div style="margin-left: 20px;overflow: hidden;">
      <el-form class="form-container" style="padding: 20px 0;float: left;width: 80%;">
        <el-input v-model="queryParam.userId" clearable placeholder="用户ID" @keyup.enter.native="searchSignList" style="width: 200px;"></el-input>
        <el-input v-model="queryParam.condition" clearable placeholder="姓名/手机号" @keyup.enter.native="searchSignList" style="width: 200px;"></el-input>

        <el-button class="search" icon="el-icon-search" @click="searchSignList">搜索</el-button>
        <el-button @click="handleDownload">导出Excel</el-button>
      </el-form>
    </div>
    <div>
      <el-tabs class="color-222 c-ph20 font-bold family-PingFangSC-Semibold" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane class="family-PingFangSC-Semibold color-222 font-bold" label="全部" name="all">
        </el-tab-pane>
        <el-tab-pane label="待审核" name="examin">
        </el-tab-pane>
        <el-tab-pane label="报名成功" name="sign_success">
        </el-tab-pane>
        <el-tab-pane label="已作废" name="abandoned">
        </el-tab-pane>
      </el-tabs>
      <userList-table :permission="permission" @refreshData = 'refreshData' :queryParam="queryParam" :userListData="userListData"></userList-table>
    </div>
  </div>
</template>
<script>
  import { getActivityEnroll } from '@/api/activities'
  import userListTable from './components/userListTable.vue'
  import { interaction_activities } from '@/utils/permission'
  export default {
    components: {
      userListTable
    },
    data() {
      return {
        permission: 3,
        queryParam: {
          activityId: -1,
          state: -2,
          signed: -1,
          pageIndex: 0,
          reTotal: null,
          pageSize: 10,
          condition: '',
          userId: ''
        },
        listLoading: false,
        activeName: 'all', // 选中的tab页
        userListData: [],
        filename: '报名单',
        sheetTitle: '报名单表',
        channel: 1,
        userId1: null,
        condition1: null,
        token: '',
        URLAPI: process.env.BASE_API
      }
    },
    mounted() {
      this.getUserListData()
      this.getModelPermission()
    },
    watch: {
      // 监听路由名称变化 重新调用数据
      $route: function(to, from) {
        if (to.name == 'userList') {
          this.getUserListData()
        }
      }
    },
    methods: {
      getModelPermission() {
        this.permission = interaction_activities()
      },
      getUserListData() {
        this.queryParam.activityId = this.$route.params.activityId
        this.listLoading = true
        getActivityEnroll(this.queryParam).then(res => {
          console.log('报名列表', res)
          this.token = res['config']['headers']['Authorization'].split(' ')[1]
          for (var i = 0; i < res.data.data.data.length; i++) {
            res.data.data.data[i].fieldVal = JSON.parse(res.data.data.data[i].fieldVal)
          }
          this.userListData = res.data.data.data
          this.listLoading = false
          this.queryParam.reTotal = res.data.data.retTotal
        }).catch(err => {
          this.listLoading = false
          console.log(err)
        })
      },
      linkToSign() {
        location.href = '#/activities/signManage'
      },
      handleClick(tab, event) {
        this.activeName = tab.name
        if (this.activeName == 'sign_success') {
          this.queryParam.state = 1 // 切换子主键的名称
        } else if (this.activeName == 'abandoned') {
          this.queryParam.state = -1
        } else if (this.activeName == 'all') {
          this.queryParam.state = -2
          this.queryParam.signed = -1
        } else {
          this.queryParam.state = 0
        }
        this.queryParam.condition = '' // 切换子主键时将条件清空
        this.queryParam.pageIndex = 0
        this.getUserListData()
      },
      searchSignList() {
        this.queryParam.state = -2
        this.activeName = 'all'
        this.getUserListData()
      },
      refreshData() {
        this.getUserListData()
      },
      handleDownload() {
        if (this.userListData.length == 0) {
          this.$message.warning('没有数据不能导出')
          return
        }
        if (this.queryParam.userId == '' || this.queryParam.userId == null) {
          this.userId1 = null
        } else {
          this.userId1 = this.queryParam.userId
        }
        if (this.queryParam.condition == null || this.queryParam.condition == '') {
          this.condition1 = null
        } else {
          this.condition1 = this.queryParam.condition
        }
        console.log('导出', this.URLAPI + '/excel/exportActivitiesEnroll/' + this.filename + '/' + this.sheetTitle + '/' + this.queryParam.activityId + '/' + this.queryParam.state + '/' + this.channel + '/' + this.userId1 + '/' + this.condition1 + '?token=' + this.token)

        window.open(this.URLAPI + '/excel/exportActivitiesEnroll/' + this.filename + '/' + this.sheetTitle + '/' + this.queryParam.activityId + '/' + this.queryParam.state + '/' + this.channel + '/' + this.userId1 + '/' + this.condition1 + '?token=' + this.token)
      }
    }
  }
</script>
<style scoped>
</style>
